Парочка приемов работы с элементом iframe (туториал)

Доброго времени суток, друзья!

Элемент iframe (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы — WebReference

Спецификация.

Задача

Сделать одностраничник, состоящий из фреймов, наподобие Dashboard на Codepen.

Результат должен быть примерно следующим:

Возможное решение

Разметка одной секции может выглядеть так:

<section>     <h3>Title</h3>     <div class="viewport">         <iframe src="index.html" seamless scrolling="no"></iframe>     </div>     <div class="buttons">         <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button>         <button onclick="document.location='code.7z'" title="download">code</button>     </div> </section> 


Что здесь интересного?

Поскольку каждый блок имеет заголовок, мы может обернуть его в
















Читать далее